import Icon from '@/components/icon/index'
import { addChannel, delChannels } from '@/store/action/home'
import { Toast } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'
import styles from './index.module.scss'

/**
 * 频道管理组件
 * @param {Number} props.tabActiveIndex 用户选中的频道的索引
 * @param {Function} props.onClose 关闭频道管理抽屉时的回调函数
 * @param {Function} props.onChannelClick 当点击频道列表中的某个频道时的会带哦函数
 */
const Channels = ({ onclose, index, onChange }) => {
  const dispatch = useDispatch()
  const userLiss = useSelector((state) => state.home.Userchannels)
  const recommendChannels = useSelector((state) => {
    const { Userchannels, allchannels } = state.home
    return allchannels.filter((item) => {
      return Userchannels.findIndex((v) => v.id === item.id) === -1
    })
  })
  const [editding, seteditding] = useState(false)
  const del = (channel, i) => {
    if (userLiss.length <= 4) {
      Toast.info('至少保留4个')
      return
    }
    dispatch(delChannels(channel))
    if (i < index) {
      onChange(index - 1)
    }
    if (i === index) {
      onChange(0)
    }
  }
  const add = (channel) => {
    dispatch(addChannel(channel))
  }
  return (
    <div className={styles.root}>
      {/* 顶部栏：带关闭按钮 */}
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onclose} />
      </div>

      {/* 频道列表 */}
      <div className="channel-content">
        {/* 当前已选择的频道列表 */}
        <div
          className={classNames('channel-item', {
            edit: editding,
          })}
        >
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {editding ? '点击删除频道' : '点击个人频道'}
            </span>
            <span
              className="channel-item-edit"
              onClick={() => seteditding(!editding)}
            >
              {editding ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {userLiss.map((item, i) => {
              return (
                <span
                  onClick={() => {
                    if (editding) return
                    onChange(i)
                    onclose()
                  }}
                  className={classNames('channel-list-item', {
                    selected: index === i,
                  })}
                  key={item.id}
                >
                  {item.name}
                  {item.id !== 0 && (
                    <Icon
                      type="iconbtn_tag_close"
                      onClick={() => del(item, i)}
                    />
                  )}
                </span>
              )
            })}
          </div>
        </div>

        {/* 推荐的频道列表 */}
        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recommendChannels.map((item) => [
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => add(item)}
              >
                {item.name}
              </span>,
            ])}
          </div>
        </div>
      </div>
    </div>
  )
}
export default Channels
